<template>
	<view>
		<view class="card-box">
			<view class="card-box_withdraw">
				<view class="between align-c">
					<view class="">可提现金额（元）</view>
					<view class="card-box_withdraw_btn" @click="$to(`/pages/mine/topUp?num=${info.cash}`)">提现</view>
				</view>
				<view class="card-box_num" v-if="info">{{ info.cash }}</view>
				<view class="card-box_num" v-else>0.00</view>
				<view class="card-box_grand_total">累计提现：<text v-if="info">{{ info.total_cash }}</text><text v-else>0.00</text> </view>
			</view>
			<view v-if="info.role==2" class="between align-c card-box_bottom" @click="$to('/pages/mine/freeze_commission')">
				<view class="">冻结佣金</view>
				<view class="flex align-c">
					<view v-if="info">{{ info.frozen }}元</view>
					<view v-else>0.00元</view>
					<image src="/static/home/into-gray.png" mode="widthFix" class="into-gray" />
				</view>
			</view>
		</view>
		
		<view class="">
			<view class="label-tit">提现明细</view>
			<view v-if="list&&list.length">
				<view class="log-item" v-for="(v,i) in list" :key="i">
					<view class="between align-c">
						<view class="log-item_name">佣金提现-{{ v.card.type }}（{{ v.card.account?v.card.account: v.card.card_code.substr(-4) }}）</view>
						<view class="log-item_num">+{{ v.commission }}</view>
					</view>
					<view class="between align-c log-item_bottom">
						<view class="gray">{{ v.created_at }}</view>
						<!-- <view class="red">审核中</view> -->
					</view>
				</view>
			</view>
			<view v-else>
				<image src="/static/none_log.png" mode="widthFix" class="none_log" />
				<text class="noMore">暂无提现记录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: null,
				list: [],
				page: 1,
				last_page: 1,
			}
		},
		onShow() {
			this.getMyWallet()
		},
		methods: {
			async getMyWallet() {
				let res = await this.$api.get('staff/my/wallet',{
					page: this.page
				});
				if(res.code == 200) {
					console.log(res,1111);
					this.info = res.data.info;
					this.last_page = parseInt(res.data.logs.to)/parseInt(res.data.logs.per_page)
					if(this.page == 1) {
						this.list = res.data.logs.data;
					}else {
						this.list.push(...res.data.logs.data);
					}
				}
			},
			
		}
	}
</script>

<style>
	page {
		background-color: #FFF;
	}
</style>

<style lang="scss" scoped>
	.card-box {
		margin: 27rpx;
		background-color: #FFF2E7;
		color: #FFF;
		border-radius: 20rpx;
		overflow: hidden;
		font-size: 21rpx;
		&_withdraw {
			padding: 24rpx 32rpx;
			background-color: #F17816;
			border-radius: 20rpx;
			&_btn {
				font-size: 27rpx;
				width: 133rpx;
				height: 53rpx;
				line-height: 53rpx;
				text-align: center;
				border: 1rpx solid #FFF;
				border-radius: 27rpx;
			}
		}
		&_num {
			font-family: PingFang SC Bold;
			font-weight: bold;
			font-size: 67rpx;
			margin-bottom: 40rpx;
		}
		&_grand_total {
			padding-bottom: 16rpx;
		}
		&_bottom {
			color: #333;
			padding: 24rpx 32rpx;
		}
		.into-gray {
			width: 11rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}
	}
	.label-tit {
		font-size: 32rpx;
		font-family: PingFang SC Bold;
		font-weight: bold;
		margin: 50rpx 27rpx;
	}
	.log-item {
		margin: 0 27rpx;
		border-bottom: 1rpx solid #F5F5F5;
		font-size: 24rpx;
		margin-top: 40rpx;
		&_bottom {
			padding: 10rpx 0;
		}
		&_name {
			font-size: 27rpx;
		}
		&_num {
			font-weight: bold;
			font-size: 32rpx;
		}
	}
	.none_log {
		display: block;
		margin: 0 auto;
		width: 400rpx;
		height: 200rpx;
	}
	.noMore {
		font-size: 24rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>